<template>
  <div class="weui-panel grey-bg" @click="playSound">
    <div class="weui-cells" @click="chooseGame">
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__hd">
          <img class="big-icon" src="img/playerGroup/choose-game-icon.png">
        </div>
        <div class="weui-cell__bd">
          <p>请选择游戏</p>
        </div>
        <div class="weui-cell__ft"></div>
      </div>
    </div>

    <div v-show="gameType === 1" class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏类型: </label></div>
        <div class="weui-cell__bd">
          经典牛牛
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏玩法: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item">
              <div class="rule_pick" :class="{active: classicBullConfig.jsonContent.ruleType === 1}" @click="classicBullConfig.jsonContent.ruleType = 1">抢庄</div>
            </div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.ruleType === 3}" @click="classicBullConfig.jsonContent.ruleType = 3">牌大坐庄</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.ruleType === 4}" @click="classicBullConfig.jsonContent.ruleType = 4">轮庄</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.ruleType === 5}" @click="classicBullConfig.jsonContent.ruleType = 5">霸王庄</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.ruleType === 2}" @click="classicBullConfig.jsonContent.ruleType = 2">牛牛坐庄</div></div>
            <div class="weui-flex__item"></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">局数选择: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.turns === 1}" @click="classicBullConfig.jsonContent.turns = 1">15局</div>(消耗1钻石)</div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.turns === 2}" @click="classicBullConfig.jsonContent.turns = 2">30局</div>(消耗2钻石)</div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">可见手牌: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.showCardCount === 4}" @click="classicBullConfig.jsonContent.showCardCount = 4">4张</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.showCardCount === 3}" @click="classicBullConfig.jsonContent.showCardCount = 3">3张</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.showCardCount === 0}" @click="classicBullConfig.jsonContent.showCardCount = 0">0张</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">支付方式: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.payType === 1}" @click="classicBullConfig.jsonContent.payType = 1">AA支付</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: classicBullConfig.jsonContent.payType === 3}" @click="classicBullConfig.jsonContent.payType = 3">群主支付</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">玩法别名: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="classicBullConfig.confName">
          </div>
        </div>
      </div>
      <div class="weui-cell" @click="confirmSetting">
        <a class="weui-btn weui-btn_blue" style="width: 80%;">确认设置</a>
      </div>

    </div>

    <div v-show="gameType === 2" class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏类型: </label></div>
        <div class="weui-cell__bd">
          斗公牛
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">局数选择: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.turns === 1}" @click="fightBullConfig.jsonContent.turns = 1">1轮庄</div>(消耗1钻石)</div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.turns === 2}" @click="fightBullConfig.jsonContent.turns = 2">2轮庄</div>(消耗2钻石)</div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">带入锅底: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.bottomType === 1}" @click="fightBullConfig.jsonContent.bottomType = 1">10分</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.bottomType === 2}" @click="fightBullConfig.jsonContent.bottomType = 2">20分</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.bottomType === 3}" @click="fightBullConfig.jsonContent.bottomType = 3">30分</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">可见手牌: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.showCardCount === 4}" @click="fightBullConfig.jsonContent.showCardCount = 4">4张</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.showCardCount === 3}" @click="fightBullConfig.jsonContent.showCardCount = 3">3张</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.showCardCount === 0}" @click="fightBullConfig.jsonContent.showCardCount = 0">0张</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">支付方式: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.payType === 1}" @click="fightBullConfig.jsonContent.payType = 1">AA支付</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: fightBullConfig.jsonContent.payType === 3}" @click="fightBullConfig.jsonContent.payType = 3">群主支付</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">玩法别名: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="fightBullConfig.confName">
          </div>
        </div>
      </div>
      <div class="weui-cell" @click="confirmSetting">
        <a class="weui-btn weui-btn_blue" style="width: 80%;">确认设置</a>
      </div>

    </div>

    <div v-show="gameType === 3" class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏类型: </label></div>
        <div class="weui-cell__bd">
          红中麻将
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">局数选择: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.turns === 1}" @click="majiangConfig.jsonContent.turns = 1">八回合</div>(消耗1钻石)</div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.turns === 2}" @click="majiangConfig.jsonContent.turns = 2">十六回合</div>(消耗2钻石)</div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">中码规则: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.ruleType === 1}" @click="majiangConfig.jsonContent.ruleType = 1">一码全中</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.ruleType === 2}" @click="majiangConfig.jsonContent.ruleType = 2">两个码</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.ruleType === 3}" @click="majiangConfig.jsonContent.ruleType = 3">四个码</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.ruleType === 4}" @click="majiangConfig.jsonContent.ruleType = 4">六个码</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.ruleType === 5}" @click="majiangConfig.jsonContent.ruleType = 5">八个码</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏人数: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.maxPlayerCount === 3}" @click="majiangConfig.jsonContent.maxPlayerCount = 3">3</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.maxPlayerCount === 4}" @click="majiangConfig.jsonContent.maxPlayerCount = 4">4</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">支付方式: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.payType === 1}" @click="majiangConfig.jsonContent.payType = 1">AA支付</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: majiangConfig.jsonContent.payType === 3}" @click="majiangConfig.jsonContent.payType = 3">群主支付</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">玩法别名: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="majiangConfig.confName">
          </div>
        </div>
      </div>
      <div class="weui-cell" @click="confirmSetting">
        <a class="weui-btn weui-btn_blue" style="width: 80%;">确认设置</a>
      </div>

    </div>

    <div v-show="gameType === 5" class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">游戏类型: </label></div>
        <div class="weui-cell__bd">
          点子牛
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">局数选择: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.turns === 1}" @click="dianziBullConfig.jsonContent.turns = 1">15局</div>(消耗1钻石)</div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.turns === 2}" @click="dianziBullConfig.jsonContent.turns = 2">30局</div>(消耗2钻石)</div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">玩法: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.ruleType === 6}" @click="dianziBullConfig.jsonContent.ruleType = 6">牛牛几倍</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.ruleType === 7}" @click="dianziBullConfig.jsonContent.ruleType = 7">牛牛相差</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">可见手牌: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.showCardCount === 4}" @click="dianziBullConfig.jsonContent.showCardCount = 4">4张</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.showCardCount === 3}" @click="dianziBullConfig.jsonContent.showCardCount = 3">3张</div></div>
          </div>
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.showCardCount === 0}" @click="dianziBullConfig.jsonContent.showCardCount = 0">0张</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">支付方式: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.payType === 1}" @click="dianziBullConfig.jsonContent.payType = 1">AA支付</div></div>
            <div class="weui-flex__item"><div class="rule_pick" :class="{active: dianziBullConfig.jsonContent.payType === 3}" @click="dianziBullConfig.jsonContent.payType = 3">群主支付</div></div>
          </div>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">玩法别名: </label></div>
        <div class="weui-cell__bd">
          <div class="weui-flex">
            <input class="weui-input" type="text" placeholder="玩法别名" v-model.trim="dianziBullConfig.confName">
          </div>
        </div>
      </div>
      <div class="weui-cell" @click="confirmSetting">
        <a class="weui-btn weui-btn_blue" style="width: 80%;">确认设置</a>
      </div>

    </div>

    <div class="choose-game-modal grey-bg" v-show="showModal">
      <div style="height: 10%;"><i @click="closeModal" class="weui-icon-cancel pull-right mt-5"></i></div>
      <div style="height: 15%;text-align:center;font-size: 20px;">请选择要玩的游戏</div>
      <div class="game-label"><a class="weui-btn weui-btn_red btn-game" @click="chooseGameType(1)">经典牛牛</a></div>
      <div class="game-label"><a class="weui-btn weui-btn_primary btn-game" @click="chooseGameType(5)">点子牛</a></div>
      <div class="game-label"><a class="weui-btn weui-btn_deep_blue btn-game" @click="chooseGameType(2)">斗公牛</a></div>
      <div class="game-label"><a class="weui-btn weui-btn_primary btn-game" @click="chooseGameType(3)">红中麻将</a></div>
    </div>

  </div>
</template>

<script>
import { mapState, mapActions } from 'Vuex'
export default {
  data() {
    const classicBullConfig = {
      confName: '斗牛',
      gameType: 1,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: -1,
        // bottomType: -1,
        // multiple: -1,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 玩法：0斗公牛；1抢庄；2牛牛庄家；3牌大坐庄；4轮庄；5霸王庄
        ruleType: 1,
        // 押注前翻出几张牌
        showCardCount: 3,
        turns: 1
      }
    }
    const fightBullConfig = {
      confName: '斗公牛',
      gameType: 2,
      crowdId: '',
      jsonContent: {
        bottomType: 1,
        maxPlayerCount: -1,
        // multiple: -1,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 玩法：0斗公牛；1抢庄；2牛牛庄家；3牌大坐庄；4轮庄；5霸王庄
        ruleType: 0,
        // 押注前翻出几张牌
        showCardCount: 3,
        turns: 1
      }
    }
    const dianziBullConfig = {
      confName: '点子牛',
      gameType: 5,
      crowdId: '',
      jsonContent: {
        // bottomType: 1,
        maxPlayerCount: -1,
        // multiple: -1,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 玩法：0斗公牛；1抢庄；2牛牛庄家；3牌大坐庄；4轮庄；5霸王庄 6牛牛几倍 7牛牛相差
        ruleType: 6,
        // 押注前翻出几张牌
        showCardCount: 3,
        turns: 1
      }
    }
    const majiangConfig = {
      confName: '红中麻将',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
    const csmajiangConfig = {
      confName: '长沙麻将',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
    const pdkConfig = {
      confName: '跑得快',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
    const zhaniaoConfig = {
      confName: '平江扎鸟',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
     const jinhuaConfig = {
      confName: '欢乐金花',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
     const sangongConfig = {
      confName: '三公',
      gameType: 3,
      crowdId: '',
      jsonContent: {
        maxPlayerCount: 4,
        // 支付类型，1为AA，2为房主支付，3群卡支付
        payType: 3,
        // 1一码全中；2两个码，3四个码，4六个码
        ruleType: 2,
        turns: 1
      }
    }
    return {
      showModal: false,
      gameType: -1,
      classicBullConfig,
      fightBullConfig,
      majiangConfig,
      dianziBullConfig,
      csmajiangConfig,
      sangongConfig,
      jinhuaConfig,
      zhaniaoConfig,
      pdkConfig
    }
  },
  mounted() {
    if (this.ruleList.length === 0) {
      this.queryGroupInfo()
    }
  },
  methods: {
    ...mapActions(['queryGroupInfo']),
    playSound() {
      window.btn_sound.play();
    },
    closeModal() {
      this.showModal = false
    },
    chooseGame() {
      this.showModal = true
    },
    chooseGameType(type) {
      this.gameType = type
      this.showModal = false
      this.pannelStyle = {}
    },
    confirmSetting() {
      this.classicBullConfig.crowdId = this.myGroupInfo.id
      this.fightBullConfig.crowdId = this.myGroupInfo.id
      this.majiangConfig.crowdId = this.myGroupInfo.id
      this.dianziBullConfig.crowdId = this.myGroupInfo.id
      this.csmajiangConfig = this.myGroupInfo.id
      this.sangongConfig = this.myGroupInfo.id
      this.jinhuaConfig = this.myGroupInfo.id
      this.zhaniaoConfig = this.myGroupInfo.id
      this.pdkConfig = this.myGroupInfo.id

      switch (this.gameType) {
        case 1:
          this.api.group.createRule(this.classicBullConfig).then(res => res.json()).then(data => {
            $.alert(data.message, () => {
              this.$router.push({name: 'myGroup'})
            })
          })
          break
        case 2:
          this.api.group.createRule(this.fightBullConfig).then(res => res.json()).then(data => {
            $.alert(data.message, () => {
              this.$router.push({name: 'myGroup'})
            })
          })
          break
        case 3:
          this.api.group.createRule(this.majiangConfig).then(res => res.json()).then(data => {
            $.alert(data.message, () => {
              this.$router.push({name: 'myGroup'})
            })
          })
          break
        case 5:
          this.api.group.createRule(this.dianziBullConfig).then(res => res.json()).then(data => {
            $.alert(data.message, () => {
              this.$router.push({name: 'myGroup'})
            })
          })
          break
      }
    }
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user', 'myGroupInfo', 'ruleList'])
  },
  components: {
  }
}

</script>

<style lang="less">
.rule_pick {
  border: 1px solid #919191;
  margin: 5px 10px;
  color: #919191;
  border-radius: 5px;
  padding: 3px 0;
  &.active{
    color: #ff8400;
    border: 1px solid #ff8400;
  }
}

.choose-game-modal {
  position: fixed;
  width: 80%;
  // height: 60%;
  top: 20%;
  left: 10%;
  border: 1px solid #c5c5c5;
  box-shadow: 0px 0px 1px #c5c5c5;
  border-radius: 10px;
}
.game-label {
  margin-top: 20px;
  margin-bottom: 20px;
}
.btn-game {
  width: 80%;
}
.weui-btn_deep_blue {
  background-color: #745dff;
}
.weui-btn_red {
  background-color: #ff785d;
}
</style>